<template>
  <div className="line-chart">
    <basic-container>
       <div class="select">
          <el-date-picker
            class="timePicker"
            v-model="selectTime"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions">
          </el-date-picker>
          <el-button type="primary" round>筛选时间范围</el-button>
        </div>
      <ve-line :data="chartData" :settings="chartSettings"></ve-line>
    </basic-container>
  </div>
</template>

<script>
import VeLine from 'v-charts/lib/line'
import BasicContainer from '@vue-materials/basic-container'

export default {
  components: { VeLine, BasicContainer },
  name: 'LineChart',

  data() {
    return {
      pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        selectTime:''
    }
  },

  created() {
    this.chartData = {
      columns: ['日期', '成本', '利润', '占比', '其他'],
      rows: [
        { '成本': 1523, '日期': '1月1日', '利润': 1523, '占比': 0.12, '其他': 100 },
        { '成本': 1223, '日期': '1月2日', '利润': 1523, '占比': 0.345, '其他': 100 },
        { '成本': 2123, '日期': '1月3日', '利润': 1523, '占比': 0.7, '其他': 100 },
        { '成本': 4123, '日期': '1月4日', '利润': 1523, '占比': 0.31, '其他': 100 },
        { '成本': 3123, '日期': '1月5日', '利润': 1523, '占比': 0.12, '其他': 100 },
        { '成本': 7123, '日期': '1月6日', '利润': 1523, '占比': 0.65, '其他': 100 }
      ]
    }
    this.chartSettings = {
      metrics: ['成本', '利润','占比','其他'],
      dimension: ['日期']
    }
  },
}

</script>

<style>
  .line-chart {

  }
  .select .timePicker{
    margin-right: 15px
  }
</style>
